<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page pageEncoding="UTF-8"%>
<div class="row-fluid">
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="#"> <spring:message
					code="app.admin.congregations" /> </a>
			<ul class="nav pull-right">
				<li><a id="addCng" href="/admin/congregation#add"> <i
						class="icon-plus icon-white"></i> </a>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		require([ 'jquery', 'app' ], function($, app) {
			$('#addCng').click(function(e) {
				e.preventDefault();
				var url = $(this).attr('href');
				app.go(url, '#congregation-content');
			});
		});
	</script>
</div>
<div id="congregation-content" class="row-fluid">
	<div>
		<c:if test="${not empty items }">
			<table class="table">
				<tbody>
					<c:forEach items="${items}" var="cong">
						<tr class="tr" >
							<td onclick="toggle(this,'${cong.id}','${cong.name}');"><c:out value="${cong.name}" escapeXml="true" /></td>
						</tr>
					</c:forEach>
					<tr class="trbottom">
						<td colspan="6"><c:if test="${not empty np}">
								<center>
									<a id="np" href="/admin#congregations?np=${np}"> <spring:message
											code="labels.more" htmlEscape="true" /> </a>
								</center>
							</c:if>
						</td>
					</tr>
				</tbody>
			</table>
			<c:if test="${not empty np}">
				<script type="text/javascript">
					var items = {};
					function toggle(node,id,name){
						require(['jquery','mustache','text!templates/congregation/item.html','text!templates/congregation/form.html'],
						function($,m,item,form){
							if(items[id] == undefined)items[id] = {edit:false};
							if(items[id].edit){
								function render(data){$(node).html(m.render(item,data.congregation));}
								var val = $('input#name'+id).val();
								if(items[id].last !== val){
									$.ajax({
										type:'POST',
										dataType:'json',
										url:'/admin/congregation',
										data:$('form#cong'+id).serialize()	
									}).success(render).error(function(err){
										render({id:id,name:item[id].last});
									});
								}else{
									render({congregation:{id:id,name:name}});
								}								
							}else{
								$(node).html(m.render(form,{name:name,id:id}));
							}			
							items[id] = {edit:!items[id].edit, last:name};
						});
					}
				
					require([ 'jquery', 'mustache',
							'text!templates/congregation/item.html',
							'i18n!nls/messages', 'domReady!' ], function($, m,
							tmplStr, bdl) {
						function tmpl(item) {
							if (isNaN(item.id))
								throw "invalid data";
							return m.render(tmplStr, $.extend(item, bdl));
						}
						$("a#np").click(
								function(e) {
									var _self = this;
									var url = $(_self).attr('href');
									url = url.replace(/#/g, '/');
									$.ajax({
										type : 'GET',
										dataType : 'json',
										url : url
									}).success(
											function(data) {
												$("tr.trbottom").before(
														function() {
															return $.map(
																	data.items,
																	tmpl).join(
																	"");
														});
												$('a#np').attr(
														'href',
														'/admin#congregations?np='
																+ data.np);
											});
								});
					});
				</script>
			</c:if>
		</c:if>
		<c:if test="${empty items}">
			<spring:message code="app.admin.congregations" var="congLbl" />
			<spring:message code="messages.emptyList" arguments="${congLbl}" />
		</c:if>
	</div>
</div>